<template>
  <div>
    <Category :sene="sene"></Category>
    <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin:10px 0px">
        <div v-show="sene==1">
            <el-button type="primary" icon="ele-Plus" @click="addSpu" :disabled="cateStore.state.c3Id==''">添加SPU</el-button>
            <el-table border style="margin:10px 0px" :data="spu.records">
              <el-table-column type="index" width="90" label="序号" align="center" />
              <el-table-column label="SPU名称" prop="spuName"></el-table-column>
              <el-table-column label="SPU描述" prop="description" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column label="操作">
                <template v-slot="{row,$index}">
                  <el-button type="primary" size="small" :icon="Plus"  @click="addSku(row)" title="添加SKU"></el-button>
                  <el-button type="warning" size="small" :icon="Edit" @click="editSpu(row)" title="修改SPU"></el-button>
                  <el-button type="info" size="small" :icon="InfoFilled" title="查看SKU列表" @click="lookSkuList(row.id)"></el-button>
        
                  <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  width="200"
                  :icon="Delete"
                  icon-color="#f00"
                  :title="`确定要删除${row.spuName}?`"
                  @confirm="delSpu(row.id)"
                >
                  <template #reference>
                    <el-button type="danger" size="small" :icon="Delete" title="删除SPU" ></el-button>
                  </template>
                </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[3, 5, 7, 9]"
              :small="false"
              :disabled="false"
              :background="true"
              layout="prev, pager, next, jumper,->,sizes,total"
              :total="total"
              @current-change="currentChange"
              @size-change="sizeChange"
            />
        </div>
       <div v-show="sene==2">
            <AddorUpdateSpu  ref="sonSpu" @changeSene="changeSene" />
       </div>
       <div v-show="sene==3">
               <AddSku ref="sonSku"  @changeSene="changeBack"/>
       </div>
       <el-dialog v-model="dialogVisible" title="展示SKU列表" style="margin-top:120px">
             <el-table  border :data="skuList" >
              <el-table-column  label="SKU名称" prop="skuName">
              </el-table-column>
              <el-table-column  label="SKU价格" prop="price">
              </el-table-column>
              <el-table-column  label="SKU重量" prop="weight">
              </el-table-column>
              <el-table-column  label="SKU图片">
                <template #="{row}">
                     <img  :src="row.skuDefaultImg"  style="width:100px" />
                </template>
              </el-table-column>
             </el-table>
       </el-dialog>
       
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { Delete, Edit, Plus, InfoFilled } from '@element-plus/icons-vue'
import { reqGetSpuList,reqGetSkuInfo,reqDelSpu} from '@/api/product/spu/index'
import useCategoryStore from '@/stores/category'
import { ref, watch } from 'vue'

import AddSku from './AddSku.vue'
import AddorUpdateSpu from './AddorUpdateSpu.vue'
import { ElMessage } from 'element-plus'

const currentPage = ref(1)
const pageSize = ref(3)
const total = ref(1)
const sene = ref(1)
const cateStore = useCategoryStore()
const spu:any = ref({})
const sonSpu = ref()
const sonSku =ref()
const skuList = ref<any>([])
const dialogVisible = ref(false)
watch(
  () => cateStore.state.c3Id,
   () => {
    if (cateStore.state.c3Id == '') {
        spu.value={}
        return
    }
    currentPage.value =1
    getSpuList()
  }
)
const getSpuList =async()=>{
    const spuList =  await reqGetSpuList(currentPage.value, pageSize.value, cateStore.state.c3Id)
    spu.value = spuList
    total.value =spuList.total
}
const currentChange = (value:number)=>{
  currentPage.value =value
  getSpuList()
}
const sizeChange= (value:number)=>{
   pageSize.value=value
   currentPage.value =1
   getSpuList()
}
const addSpu = ()=>{
    sene.value=2
    //调用儿子的方法在儿子组件获取单个Spu的详情值
    sonSpu.value.addSpuInit(cateStore.state.c3Id)
    
}
const  editSpu =(row:any)=>{
    sene.value=2
    //调用儿子的方法在儿子组件获取单个Spu的详情值
    sonSpu.value.reqSpuInfoData(row)
}
const addSku = (row:any)=>{
    sene.value=3
    sonSku.value.initSkuData(row)
}
const changeSene =({seneNum,addOrUpdateFlag})=>{
  console.log(seneNum,addOrUpdateFlag)
    sene.value =seneNum
    if(addOrUpdateFlag=='add'){
      currentPage.value= 1
      getSpuList()
    }else{
      getSpuList()
    }
}
const changeBack = (seneNum:number) =>{
      sene.value= seneNum
}
const lookSkuList = async (rowId:number)=>{
      dialogVisible.value=true
      skuList.value =  await reqGetSkuInfo(rowId)
}
const delSpu =async (rowId:number)=>{
  try {
      await reqDelSpu(rowId)
      ElMessage({
        message:'删除SPU成功！',
        type:'success'
      })
      getSpuList()
  } catch (error) {
    ElMessage({
        message:'删除SPU失败！',
        type:'error'
      })
  }
}
</script>

<style scoped>
</style>